<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端监控SDK</title>
  <style>
    .text {
      display: flex;
      flex-wrap: wrap;
    }
  </style>
</head>

<body>
  <div>
    <div id="container">
      <div class="content">
        <input type="button" value="点击抛出错误" onclick="errClick()" />
        <input type="button" value="点击抛出promise错误" onclick="promiseErrClick()" />
      </div>
      <!-- 图片代替 -->
      <!-- <img src="https://h5-test.fireflybao.com/app/img/head-pic-form.png" alt="图片加载失败报错" /> -->
      <input id="successBtn" type="button" value="ajax成功请求" onclick="sendSuccess()" />
      <input id="errorBtn" type="button" value="ajax失败请求" onclick="sendError()" />
      <div class="text"></div>
    </div>
  </div>
  <!-- js报错 promise报错 -->
  <script>
    function errClick() {
      window.some.error = 'err'
    }
    function promiseErrClick() {
      new Promise((resolve, reject) => {
        // window.some.error = 'error'
        reject('未捕获错误')
      }).then(res => {
        console.log(res)
      })
    }
    function sendSuccess() {
      const xhr = new XMLHttpRequest
      xhr.open('GET', '/success', true)
      xhr.responseType = 'json'
      xhr.onload = function () {
        console.log(xhr.response)
      }
      xhr.onerror = function (error) {
        console.log(error)
      }
      xhr.send()
    }
    function sendError() {
      const xhr = new XMLHttpRequest
      xhr.open('POST', '/error', true)
      xhr.responseType = 'json'
      xhr.onload = function () {
        console.log(xhr.response)
      }
      xhr.onerror = function (error) {
        console.log(error)
      }
      xhr.send({ name: 'weihua' })
    }
  </script>
  <!-- 白屏检测代码 -->
  <script>
    let content = document.getElementsByClassName('text')[0]
    content.innerHTML = '<span>@</span>'.repeat(1000)
  </script>
  <script>
    // DOM解析完成，即使依赖的资源没有加载完成，也会触发这个事件
    document.addEventListener('DOMContentLoaded', () => {
      let start = Date.now()
      while ((Date.now() - start) < 1000) { }
      console.log('这里消耗时间为domContentLoadedTime')
    })
  </script>
  <!-- fmp首次有意义绘制 elementtiming="meaningful" 必须添加此属性 -->
  <script>
    setTimeout(() => {
      let content = document.getElementsByClassName('content')[0];
      let h1 = document.createElement('h1');
      h1.innerHTML = '我是这个页面中最有意义的内容';
      h1.setAttribute('elementtiming', 'meaningful');
      content.appendChild(h1);
    }, 2000);
  </script>
</body>

</html>